<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 个人博客</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            background-color: #121212;
            padding-top: 40px;
            padding-bottom: 40px;
            color: #e0e0e0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .login-form {
            max-width: 400px;
            padding: 25px;
            margin: 0 auto;
            background-color: #1e1e1e;
            border-radius: 10px;
            box-shadow: 0 0 30px rgba(102, 178, 255, 0.2);
            border: 1px solid rgba(102, 178, 255, 0.1);
            transition: all 0.3s ease;
        }
        .login-form:hover {
            box-shadow: 0 0 40px rgba(102, 178, 255, 0.3);
        }
        .login-form .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 12px;
            font-size: 16px;
            margin-bottom: 20px;
            background-color: #2d2d2d;
            border: 1px solid #444;
            color: #e0e0e0;
            transition: all 0.3s ease;
        }
        .login-form .form-control:focus {
            background-color: #333;
            border-color: #66b2ff;
            box-shadow: 0 0 0 0.25rem rgba(102, 178, 255, 0.25);
        }
        .login-form .btn {
            font-weight: 600;
            padding: 12px;
            transition: all 0.3s ease;
        }
        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }
        .login-header h1 {
            font-weight: 600;
            color: #66b2ff;
            margin-bottom: 10px;
        }
        .login-header p {
            color: #aaa;
        }
        .form-check-input {
            background-color: #2d2d2d;
            border: 1px solid #444;
        }
        .form-check-input:checked {
            background-color: #66b2ff;
            border-color: #66b2ff;
        }
        label {
            color: #ccc;
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="login-form">
            <div class="login-header">
                <h1><i class="bi bi-code-slash"></i> 个人博客</h1>
                <p class="text-muted">请登录您的账户</p>
            </div>
            
            <div th:if="${param.error}" class="alert alert-danger">
                用户名或密码错误，请重试。
            </div>
            
            <div th:if="${param.logout}" class="alert alert-success">
                您已成功退出登录。
            </div>

            <form th:action="@{/login}" method="post" data-turbo="false">
                <div class="form-group">
                    <label for="username"><i class="bi bi-person"></i> 用户名</label>
                    <div class="input-group">
                        <span class="input-group-text bg-dark text-light border-secondary"><i class="bi bi-person-fill"></i></span>
                        <input type="text" id="username" name="username" class="form-control" required autofocus>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="password"><i class="bi bi-key"></i> 密码</label>
                    <div class="input-group">
                        <span class="input-group-text bg-dark text-light border-secondary"><i class="bi bi-lock-fill"></i></span>
                        <input type="password" id="password" name="password" class="form-control" required>
                    </div>
                </div>
                
                <div class="form-check mb-3">
                    <input type="checkbox" id="remember-me" name="remember-me" class="form-check-input">
                    <label class="form-check-label" for="remember-me">记住我</label>
                </div>
                
                <button class="btn btn-primary btn-block w-100" type="submit">
                    <i class="bi bi-box-arrow-in-right"></i> 登录
                </button>
            </form>
            
            <!-- 登录页脚信息 -->
            <div class="text-center mt-4">
                <p class="text-muted"><i class="bi bi-shield-lock"></i> 管理员专用登录入口</p>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>